﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css">
    <!-- <script src="./js/todolist1.js"></script> -->

</head>

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
        </section>
    </header>
    <section>
        <h2>正在进行/待办 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">
             <!-- <li><input type='checkbox' > <p>测试</p> <a href='javascript:;'></a></li> -->
        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">
           
        </ul>
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn
    </footer>

    <script>
        let data = localStorage.getItem('todolist') // 取出存储的数据
        const arr = data ? JSON.parse(data) : []
        const title = document.querySelector('#title')
        const donelist = document.querySelector('#donelist')
        const todolist = document.querySelector('#todolist')
        const todocount = document.querySelector('#todocount')
        const donecount = document.querySelector('#donecount')
        title.addEventListener('keydown', function(e) {
            // 判断是否是回车
            if (e.key == 'Enter') {
                // console.log('回车')
                if(title.value == '') {
                    alert('亲亲，请输入内容哦~')
                    return
                }
                const obj = {
                    title: title.value,  // 代办事项的标题
                    done: false  // 表示未完成
                }
                arr.push(obj)
                localStorage.setItem('todolist', JSON.stringify(arr))
                render()
            }
        })
        render()
        function render() {
            let todoCount = 0 // 未完成的个数
            let doneCount = 0 // 已完成的个数
            todolist.innerHTML = ''
            donelist.innerHTML = ''
            for (let i = 0; i < arr.length; i++) {
                const li = document.createElement('li')
                li.innerHTML = `<input type='checkbox' data-index='${i}'> <p>${arr[i].title}</p> 
                                <a href='javascript:;'></a>`
                if (arr[i].done) {
                    doneCount++
                    donelist.insertBefore(li, donelist.children[0])
                    li.querySelector('input').checked = true
                } else {
                    todoCount++
                    todolist.insertBefore(li, todolist.children[0])
                }
            }
            donecount.innerHTML = doneCount
            todocount.innerHTML = todoCount
        }

        function trans(e) {
            if (e.target.tagName == 'INPUT') {
                const checked = e.target.checked
                const index = e.target.dataset.index
                arr[index].done = checked
                localStorage.setItem('todolist', JSON.stringify(arr))
                render()
            }
        }
        //当被点击的时候调用这个方法 
        todolist.addEventListener('click', trans)
        donelist.addEventListener('click', trans)


        function delObj(e) {
            if (e.target.tagName == 'A') {
                const index = +e.target.parentNode.querySelector('input').dataset.index
                arr.splice(index, 1)
                localStorage.setItem('todolist', JSON.stringify(arr))
                render()
            }
        }
        todolist.addEventListener('click', delObj)
        donelist.addEventListener('click', delObj)
    </script>
</body>

</html>